<template>
	<view class="container">
		<view class="content">
			<!-- <p>产品图纸</p> -->
			<uni-section title="产品图纸" type="line"></uni-section>
			<uni-list :border="false">
				<uni-list-chat v-for="(item,index) in fileList" :key="index" avatar='/static/image/pdf.png'
					:title="item.fileName" clickable @click="checkFile(item.filePath)">
					<view class="chat-custom-right">
						<!-- 需要使用 uni-icons 请自行引入 -->
						<uni-icons type="redo-filled" color="#ccc" size="20"></uni-icons>
					</view>
				</uni-list-chat>
			
			</uni-list>
			<!-- <view class="pic">
				<view class="uploadGroup">
					<view class="box" v-for="(item,index) in fileList" :key="index">
						<image :src="configUrl+item.filePath" alt="" mode="aspectFill" @click="clickImg(index)" />
						<view class="close" @click="closFun(index)">x</view>
					</view>
				</view>
			</view> -->
			<!-- <p>实验报告</p> -->
			<uni-section title="试验报告" type="line"></uni-section>
			<uni-list :border="false">
				<uni-list-chat v-for="(item,index) in list" :key="index" avatar='/static/image/pdf.png'
					:title="item.appendixName" clickable @click="checkFile(item.appendixUrl)">
					<view class="chat-custom-right">
						<!-- 需要使用 uni-icons 请自行引入 -->
						<uni-icons type="redo-filled" color="#ccc" size="20"></uni-icons>
					</view>
				</uni-list-chat>

			</uni-list>
		</view>

	</view>
</template>

<script>
	import config from '@/config'
	export default {
		data() {
			return {
				title: '登录适配',
				list: [],
				fileList: [],
				configUrl: '',
			}
		},
		created() {
			this.getList()
			this.configUrl = config.baseUrl
		},
		methods: {
			getList() {
				console.log(this.$store.getters.productId)
				this.request({
					'url': '/wx/product/info/' + this.$store.getters.productId,
					'method': 'get',
				}).then(res => {
					console.log(res)
					if (res && res.code == 200) {
						let data = []
						if (res.info.appendixName) {
							let appendixName = res.info.appendixName.split(',')
							let appendixUrl = res.info.appendixUrl.split(',')
							for (let i = 0; i < appendixName.length; i++) {
								let name = appendixName[i].replace(/\.[^.]+$/, '');
								data.push({
									appendixName: appendixName[i],
									appendixUrl: appendixUrl[i]
								})
							}
						}
						this.list = data
						let data2 = []
						if (res.info.picUrl) {
							let picName = res.info.picName.split(',')
							let picUrl = res.info.picUrl.split(',')
							for (let i = 0; i < picName.length; i++) {
								let name = picName[i].replace(/\.[^.]+$/, '');
								data2.push({
									fileName: picName[i],
									filePath: picUrl[i]
								})
							}
						}
						this.fileList = data2
					}
				}).catch(err => {

				})
			},
			checkFile(url) {
				console.log(url)
				let urls = config.baseUrl + url
				const _this = this
				// 图片格式
				let isImgType = ['png', 'jpg', 'jpeg']
				// 下载
				uni.downloadFile({
					url: urls,
					success(res) {
						console.log(res)
						// 下载成功
						if (res.statusCode == 200) {
							// 获取文件类型 后缀
							let fileType = _this.getfileName(res.tempFilePath)
							// 判断是否为图片
							// 因为图片查看与文件查看预览的api不同所以这里需要判断
							if (isImgType.includes(fileType)) {
								// 图片预览
								uni.previewImage({
									//说明
									current: res.tempFilePath,
									//预览的图片集   可以是多张图片需要Array类型
									urls: [res.tempFilePath],
								})
							} else {
								// 文件预览
								uni.openDocument({
									// 文件路径
									filePath: res.tempFilePath,
									// 文件类型 除图片以外文件都需要文件类型  
									//有效值为  doc, xls, ppt, pdf, docx, xlsx, pptx
									fileType: fileType,
									//是否开启转发 
									showMenu: true,
								})
							}
						}
					}
				})
			},
			//预览
			clickImg(index) {
				let list = this.fileList.map((item) => config.baseUrl + item.filePath)
				uni.previewImage({
					current: index,
					urls: list
				})
			},
			getfileName(filename) {
				// 转换为小写方便处理 拿到.的下标
				const pos = filename.toLowerCase().lastIndexOf('.')
				let suffix = ''
				// 判断是否是文件或图片
				if (pos !== -1) {
					// 拿到截取.的下标后面所有字符(这样就拿到了文件类型)
					suffix = filename.substring(pos + 1)
				}
				return suffix
			},


		}
	}
</script>

<style>
	.container {
		padding: 15px;
	}

	.container .uni-section text {
		font-size: 16px !important;
		/* font-weight: 600; */
	}

	.content {
		background-color: #fff;
		border-radius: 10px;
		padding: 15px;
		box-shadow: 0px 0px 10px #e2dede;
	}

	.content .uni-list-chat__header {
		width: 20px;
		height: 20px;
	}

	.content .uni-list-chat__content-title {
		font-size: 14px;
	}

	.content .uni-list-chat__content-title.uni-ellipsis {
		white-space: normal;
	}

	.content .uni-list--border-top {
		/* height: 0px!important; */
	}

	.uni-list-chat {
		border-bottom: 1px solid #f3eeee;
	}

	.uploadGroup {
		display: flex;
		padding: 30rpx;
		flex-wrap: wrap;
	}

	.uploadGroup .box {
		width: 200rpx;
		height: 200rpx;
		background-color: #eee;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
		position: relative;
	}

	.box image {
		width: 100%;
		height: 100%;
	}

	.pic {
		background-color: #fff;
	}

	.close {
		position: absolute;
		right: 0;
		top: 0;
		width: 50rpx;
		height: 50rpx;
		background-color: rgba(0, 0, 0, 0.7);
		color: #fff;
		border-radius: 0 0 0 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-left: 12rpx;
		box-sizing: border-box;
		padding-bottom: 15rpx;
	}
</style>